<template>
  <div>

    <el-table
        border
        style="width: 900px"
        :data="FlowTableData">
      <!-- 设置表头数据源，并循环渲染出来，property对应列内容的字段名 -->
<!--    <el-table-column-->
<!--        v-for="info in FieldComData" :key="info.COLUMN_NAME"-->
<!--        :label="info.COLUMN_COMMENT"-->
<!--        :property="info.COLUMN_NAME">-->
<!--    </el-table-column>-->


      <el-table-column

          width="899px"
          type="expand" >
        <template slot-scope="props">
          <el-form v-for="info in FieldComData" :key="info.COLUMN_NAME" label-position="left" inline class="demo-table-expand">
            <el-form-item  :label="info.COLUMN_COMMENT+':'">
              <span>{{ props.row[info.COLUMN_NAME] }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

    </el-table>


<!--    <el-table :data="FlowTableData" stripe style="width: 100%" class="box-table">-->
<!--      <el-table-column type="index" width="50"></el-table-column>-->
<!--      <el-table-column v-for="(item,key,index) in FieldComData" :key="index" :label="key">-->
<!--        <template slot-scope="scope">-->
<!--          <div>-->
<!--            <span>{{scope.row[key]}}</span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->


  </div>
</template>

<script>
export default {
  name: "GetDetails",
  props:['DetailsData'],
  data(){
    return{
      FieldComData:[], //字段注释
      FlowTableData:[] // 审批显示数据
    }
  },
  watch: {
    data () {
      this.subData = this.GetDetails
    }
  },
  created() {
    // console.log("接受的值"+this.DetailsData)
    this.GetFieldCom();//查询字段注释
    this.GetDetails();//查询数据
  },
  methods:{
    GetFieldCom(){//查询字段注释
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("details",
          {params:{"data_column":this.DetailsData.data_column,"data_table":this.DetailsData.data_table,"QueryOperation":"getNotes"}})
          .then(res => {
            setTimeout(() => {
              loading.close();
            });
            this.FieldComData=res.data.data
            // console.log("字段注释=>"+this.FieldComData[0])

          })
          .catch()
    },
    GetDetails(){// 查询详情数据
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.get("details",
          {params:{"data_column":this.DetailsData.data_column,"data_table":this.DetailsData.data_table,"QueryOperation":"getData"}})
          .then(res => {
            setTimeout(() => {
              loading.close();
            });
            this.FlowTableData=res.data.data
            // console.log("详情数据=>"+this.FlowTableData[0])
          })
          .catch()
    }

  }
}
</script>

<style scoped>

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.demo-table-expand {
    height: 40px;
  margin-block-end: 0px;
}

/* 隐藏原有箭头图标 */
.el-table__expand-column .cell {
  display: none;
}
</style>